<template>
  <div id="app">
    <div ref="main" style="height:400px;width:600px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      High: [],
      Low: []
    };
  },
  created() {
    //dom元素还没有加载成功，但是Data里面的数据已经加载成功
    // this.$axios.get('101030100')
    // .then(res=>{
    //   this.$store.dispatch('a_getvalue',res.data.data.forecast);

    // }).catch(err=>{
    //   alert(err);
    // })

      this.$store.dispatch("a_getValue").then(() => {
      this.High = this.$store.getters.getHeight;
      this.Low = this.$store.getters.getLow;
      this.showecharts();
    }).catch(err=>{
      alert(err)
    }); //分发数据，后台拿值
  },
  mounted() {},
  methods: {
    showecharts() {
      // 基于准备好的dom，初始化echarts图表
      var myChart = this.$echarts.init(this.$refs.main);
      var option = {
        title: {
          text: "未来一周气温变化",
          subtext: "纯属虚构"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["最高气温", "最低气温"]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五"]
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          {
            name: "最高气温",
            type: "line",
            data: this.High,
            // data:[1,3,-4,7,8],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "最低气温",
            type: "line",
            data: this.Low,
            // data:[1,-3,4,-7,-8],
            markPoint: {
              data: [{ name: "周最低", type: "min" }]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    // show() {
    //   console.log(this.$store.state.temperrature);
    //   console.log(this.$store.getters.getHeight);
    //   console.log(this.$store.getters.getLow);
    // }
  }
};
</script>
<style lang="scss">
#app {
  width: 800px;
  height: 800px;
  background-color: #eee;
}
</style>
